<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ACL配置检验</title>


    <style>
        .button-board{
            display: inline-block;
            width: 15%;
            height: 100%;
            border-right: 1px solid black;
            padding-left: 2%;
            padding-top: 1%;
        }
        .button-format{
            width: 200px;
            margin-bottom: 15px;
            margin-top: 15px;
        }
        .main-board{
            display: inline-block;
            width: 80%;
            vertical-align:top;
            padding-left: 2%;
            padding-top: 1%;
            height: 100%;

            
        }
        #app{
            border: 1px black solid;
            position: fixed;
            height: 98%;
            width: 98%;
        }
    </style>

</head>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./bootstrap.min.css">
    <script src="./jquery.min.js"></script>
    <script src="./bootstrap.min.js"></script>
    <script src="./vue.js"></script>
<body>

<div id="app">
<!-- <div class="container-fluid"> -->
    <div class="button-board">
        <button class="button-format" @click="sendRequest('initTopology', 'R0')">配置R0拓扑</button>
        <button class="button-format" @click="sendRequest('initTopology', 'R1')">配置R1拓扑</button>
        <button class="button-format" @click="sendRequest('initTopology', 'R2')">配置R2拓扑</button>

        <button class="button-format" @click="sendRequest('configAcl', 'R0')">配置R0acl</button>
        <button class="button-format" @click="sendRequest('configAcl', 'R1')">配置R1acl</button>
        <button class="button-format" @click="sendRequest('configAcl', 'R2')">配置R2acl</button>

        <button class="button-format" @click="sendRequest('noConfigAcl', 'R0')">取消配置R0acl</button>
        <button class="button-format" @click="sendRequest('noConfigAcl', 'R1')">取消配置R1acl</button>
        <button class="button-format" @click="sendRequest('noConfigAcl', 'R2')">取消配置R2acl</button>

        <button class="button-format" @click="sendRequest('checkAcl', 'R0')">检验R0acl</button>
        <button class="button-format" @click="sendRequest('checkAcl', 'R1')">检验R1acl</button>
        <button class="button-format" @click="sendRequest('checkAcl', 'R2')">检验R2acl</button>
    </div>
    <div class="main-board">
        <div
            style="
                border: 1px; 
                height: 100%;
                overflow: scroll; 
                scrollbar-face-color: #889B9F;
                scrollbar-shadow-color: #3D5054;
                scrollbar-highlight-color: #C3D6DA;
                scrollbar-3dlight-color: #3D5054;
                scrollbar-darkshadow-color: #85989C;
                scrollbar-track-color: #95A6AA;
                scrollbar-arrow-color: #FFD6DA;
            " v-html='output.replaceAll("\n","<div>")'>
        </div>
    </div>
</div>
    <script>
        var app = new Vue({
        el : '#app',
        data : {
            output : ''
        },
        created: function(){
            var vm = this;
            $.get('http://localhost:5001/api/allOutput',{},function(str){
                  // console.log(str)
                var res = JSON.parse(str);
                if(res.code != 0){
                    alert(res.message)
                        return;
                }
                vm.output = res.object;
            })
        },
        methods : {
        // 路由器
            // 实际发送消息
            sendRequest : function(funName, rId){
                var vm = this;
                $.get('http://localhost:5001/api/' + funName,{'rId' : rId},function(str){
                    // console.log(str)
                    var res = JSON.parse(str);
                    if(res.code != 0){
                        alert(res.message)
                            return;
                    }
                    vm.output += res.object;
                })
            }
        }
    })
    </script>

</body>
</html>